<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item label="单据编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input disabled="true" v-decorator="['orderNo']" placeholder="系统自动生成"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="领用部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-depart :disabled="disableSubmit"
                               v-decorator="['newDepartment', validatorRules.newDepartment]"></j-select-depart>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="领用人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :disabled="disableSubmit"
                                   v-decorator="['recipientsUser', validatorRules.recipientsUser]"
                                   :trigger-change="true" dict="sys_user,username,id"
                                   placeholder="请选择领用人"/>
            </a-form-item>
          </a-col>

          <!--          <a-col :xs="24" :sm="12">-->
          <!--            <a-form-item label="请选择领用物资" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--              <j-select-fixds  @change="handleView($event,props)"></j-select-fixds>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <!--          <a-col  :xs="24" :sm="12">-->
          <!--            <a-form-item-->
          <!--              :labelCol="labelCol"-->
          <!--              :wrapperCol="wrapperCol"-->
          <!--              label="领用单">-->
          <!--              <j-image-upload   :disabled="disableSubmit"   text="上传" v-decorator="['image', {}]" :isMultiple="true" :number="6"></j-image-upload>-->
          <!--            </a-form-item>-->

          <!--          </a-col>-->
        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="物资领用记录表" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :disabled="disableSubmit"
            :ref="refKeys[0]"
            :loading="zcglRecipientsAssetsTable.loading"
            :columns="zcglRecipientsAssetsTable.columns"
            :dataSource="zcglRecipientsAssetsTable.dataSource"
            :maxHeight="300"
            :assetValue="assetValue"
            :rowNumber="true"
            :rowSelection="false"

            :actionButton="!disableSubmit"/>
        </a-tab-pane>

      </a-tabs>

    </a-spin>
    <div  v-show="printFlag"  style="position: absolute;top: 1px;background-color: whitesmoke;z-index: 100">

      <a-form :form="form">

        <table  style="border-collapse: separate;" border="2" class="table_style" >
          <div   id="assessContent" ref="assessContent"  >
            <tr>
              <td colspan="2" style="text-align: center;font-size: 40px;font-weight: 600;line-height: 40px;margin-top: 30px">物资领用单</td>
            </tr>
            <tr >
              <!--            <td style="width: 150px;text-align: center;font-size: 22px;line-height: 40px"><span>单据编码</span></td>-->
              <!--            <td style="height: 20px;width: 560px">{{ printData.orderCode }}</td>-->
              <td style="width: 150px;text-align: center;font-size: 22px;line-height: 40px" >
                <a-form-item label="单据编码" :labelCol="labelCol" :wrapperCol="wrapperCol"  style="margin-top: 30px">
                  <a-input  v-decorator="['orderNo']" placeholder="系统自动生成"></a-input>
                </a-form-item>
              </td>
            </tr>
            <tr >
              <!--            <td style="width: 150px;text-align: center;font-size: 22px;line-height: 40px"><p style="margin-top: 10px">入库部门</p></td>-->
              <!--            <td>-->
              <!--              <a-form-item    label="" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                <j-select-ru-ku-depart style="border: none;font-size: 22px;position: absolute;top:-30px;" v-decorator="['putDepartment']"></j-select-ru-ku-depart>-->
              <!--              </a-form-item>-->
              <!--            </td>-->
              <td colspan="2" style="width: 150px;text-align: center;font-size: 22px;line-height: 40px">
                <a-form-item    label="领用部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-select-ru-ku-depart
                    v-decorator="['newDepartment']"></j-select-ru-ku-depart>
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="width: 150px;text-align: center;font-size: 22px;margin-top: 34px">
                <a-form-item label="领用人" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-top: 30px">
                  <j-search-select-tag  v-decorator="['recipientsUser']"
                                        :trigger-change="true" dict="sys_user,username,id"
                                        placeholder="请选择制单人"/>
                  <!--              <j-select-assets></j-select-assets>-->
                </a-form-item>
              </td>
            </tr>
            <tr>

              <td colspan="2">        <!-- 子表单区域 -->
                <a-tabs v-model="activeKey" @change="handleChangeTabs">

                  <a-tab-pane tab="物资领用记录表" :key="refKeys[0]" :forceRender="true">

                    <j-editable-table
                      :disabled="disableSubmit"
                      :ref="refKeys[0]"
                      :loading="zcglRecipientsAssetsTable.loading"
                      :columns="zcglRecipientsAssetsTable.columns"
                      :dataSource="zcglRecipientsAssetsTable.dataSource"
                      :maxHeight="300"
                      :assetValue="assetValue"
                      :rowNumber="true"
                      :rowSelection="disableSubmit"
                      :actionButton="!disableSubmit"/>
                  </a-tab-pane>

                </a-tabs>

              </td>
              <!-- 子表单区域 -->
            </tr>
          </div>
          <tr>
            <td colspan="2">
              <a-button style="margin-left: 87%" @click="printFlag=false">关闭</a-button>
              <a-button v-if="!addFlag" type="primary" @click="printHandleS">打印</a-button>
            </td>
          </tr>
        </table>
      </a-form>
    </div>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button v-if="addFlag" @click="handleOk">确定</a-button>
      <a-button v-if="!addFlag" type="primary" @click="printHandle">打印预览</a-button>
    </template>
  </j-modal>
</template>

<script>

import pick from 'lodash.pick'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import JSelectDepart from '../../../components/jeecgbiz/JSelectDepart'
import JSelectAssets from '../../../components/jeecgbiz/JSelectAssets'
import JImageUpload from '../../../components/jeecg/JImageUpload'
import JSelectCangKu from '../../../components/jeecgbiz/JSelectCangKu'
import JSearchSelectTag from '../../../components/dict/JSearchSelectTag'
import { getAction } from '../../../api/manage'
import JSelectFixds from '../../../components/jeecgbiz/JSelectFixds'
import ImagPreview from '../../jeecg/ImagPreview'
import JSelectRuKuDepart from '../../../components/jeecgbiz/JSelectRuKuDepart'
import html2canvas from 'html2canvas'
import printJS from 'print-js'

export default {
  name: 'ZcglRecipientsModal',
  mixins: [JEditableTableMixin],
  components: {
    JSelectDepart, JSelectFixds, JImageUpload, JSelectCangKu, JSearchSelectTag,JSelectRuKuDepart
  },

  data () {

    return {
      printFlag: false,
      printData: {},
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 0,
      validatorRules: {

        newDepartment: {
          rules: [
            { required: true, message: '请选择领用部门!' },
          ]
        },
        recipientsUser: {
          rules: [
            { required: true, message: '请选择领用人!' },
          ]
        }

      },
      refKeys: ['zcglRecipientsAssets',],
      tableKeys: ['zcglRecipientsAssets',],
      activeKey: 'zcglRecipientsAssets',
      // 物资领用记录表

      zcglRecipientsAssetsTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '物资名称',
            key: 'assetId',
            type: FormTypes.select,
            dictCode: 'zcgl_asset_fixed,name,id',
            width: '400px',
            getDataFix: true,
            placeholder: '请选择${title}',
            valueExclude: [1, 20, 80],
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            disabled: true,
            title: '物资规格',
            key: 'assetSpecifications',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            disabled: true,
            title: '物资单位',
            key: 'assetUnit',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },

          {
            disabled: true,
            title: '物资类别',
            key: 'assetType',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请1输入${title}',
            defaultValue: '',
          },
          // {
          //   disabled: true,
          //   title: '物资单价',
          //   key: 'assetPrice',
          //   type: FormTypes.input,
          //   width:"110px",
          //
          //   placeholder: '请输入${title}',
          //   defaultValue: '',
          // },
          {
            disabled: true,
            title: '目前可用数量',
            key: 'trueCount',
            type: FormTypes.inputNumber,
            width: '110px',
            defaultValue: ''
          },
          {
            title: '本次领用数量',
            key: 'assetAmount',
            type: FormTypes.inputNumber,
            width: '110px',
            jisuan: true,
            jisuanSl: true,
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '备注说明',
            key: 'remark',
            type: FormTypes.input,
            width: '260px',
            placeholder: '请输入${title}',
            defaultValue: ''

          }
          // {
          //   disabled: true,
          //   title: '物资合计',
          //   key: 'total',
          //   type: FormTypes.normal,
          //   width:"200px",
          //   placeholder: '请输入${title}',
          //   defaultValue: '',
          // },

        ]
      },
      url: {
        add: '/zcglRecipients/zcglRecipients/add',
        edit: '/zcglRecipients/zcglRecipients/edit',
        zcglRecipientsAssets: {
          list: '/zcglRecipients/zcglRecipients/queryZcglRecipientsAssetsByMainId'
        },
      }
    }
  },
  created () {
  },
  props: {
    addFlag: {
      type: Object,
      default: () => {
      }
    },
    assetValue: {

      type: Object,

      default: () => {
      }
    }
  },
  methods: {
    printHandleS(){
      html2canvas(this.$refs.assessContent, {

        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {

        const url = canvas.toDataURL()
        this.img = url
        printJS({

          printable: url,
          type: 'image',
          documentTitle: '',
          spanStyle: false
        })

      })
    },
    printHandle () {
      this.printFlag = true
    },
    handleView (a, b) {

      getAction('/zcgl/assetFixed/getMulFixed', { id: a }).then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            var item = res.result[i]


            var type = item.assetType
            if (item.assetType == 'YHP01') {
              type = '易耗品'
            }
            if (item.assetType == 'BGYP01') {
              type = '办公用品'
            }
            if (item.assetType == 'CHWZ01') {
              type = '存货物资'
            }

            if (JSON.stringify(this.zcglRecipientsAssetsTable.dataSource).indexOf(item.id) == -1) {
              //存在就不做处理吧
              this.zcglRecipientsAssetsTable.dataSource.push({
                assetId: item.id,
                assetUnit: item.unit,
                assetName: item.name,
                assetPrice: item.price,
                trueCount: item.trueCount,
                lcCount: item.lcCount,
                assetSpecifications: item.specifications,
                assetType: type
              })
            }
          }
        }
      })
      // this.zcglPutStorageAssetsTable.dataSource[b.index].assetId = a
    },
    getAllTable () {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter () {

      setTimeout(() => {
        let fieldval = pick(this.model, 'newDepartment', 'oldDepartment', 'recipientsUser', 'processStatus', 'processStatusText', 'processDescription', 'orderNo')
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.zcglRecipientsAssets.list, params, this.zcglRecipientsAssetsTable)

          this.$forceUpdate()

        }

      },100)



    },
    /** 整理成formData */
    classifyIntoFormData (allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        zcglRecipientsAssetsList: allValues.tablesValue[0].values,
      }
    },
    validateError (msg) {
      this.$message.error(msg)
    },
    popupCallback (row) {
      this.form.setFieldsValue(pick(row, 'newDepartment', 'oldDepartment', 'recipientsUser', 'processStatus', 'processStatusText', 'processDescription'))
    },

  }
}
</script>

<style scoped>
</style>